<template>
  <div class="login-container">

    <div class="form">
      <el-card>
        <h1>登录</h1>
        <el-form ref="form" :model="loginForm" :rules="loginRules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-checkbox>-->
          <!--              用户平台使用协议-->
          <!--            </el-checkbox>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button style="width:350px" type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Login',

  data() {
    return {
      loginForm: {
        mobile: '15849161001',
        password: 'admin123'
      },
      loginRules: {
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'

        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '密码长度应该为6-16位之间',
          trigger: 'blur'

        }]
      },

      loading: false
    }
  },

  mounted() {
    if (this.loginForm.mobile === '') {
      this.$refs.mobile.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },

  methods: {
    handleLogin() {
      // 表单校验
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          // 发送请求到后台登录接口；
          await this.$store.dispatch('user/login', this.loginForm)
          // Vuex 中的action 返回的promise
          // 跳转主页
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="scss">

.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  background-color: #637180;

  //.logo {
  //  flex: 3;
  //  //background: rgba(38, 72, 176) url(../../assets/common/login_back.png)
  //  no-repeat center / cover;
  //  border-top-right-radius: 60px;
  //  display: flex;
  //  flex-direction: column;
  //  align-items: flex-end;
  //  justify-content: center;
  //  padding: 0 100px;
  //  .icon {
  //    //background: url(../../assets/common/logo.png) no-repeat 70px center /
  //    contain;
  //    width: 300px;
  //    height: 50px;
  //    margin-bottom: 50px;
  //  }
  //  p {
  //    color: #fff;
  //    font-size: 18px;
  //    margin-top: 20px;
  //    width: 300px;
  //    text-align: center;
  //  }
  //}
  .form {

    margin: auto;
    width: 500px;

    .el-card {
      border: none;
      padding: 0;
    }

    h1 {
      padding-left: 20px;
      font-size: 24px;
    }

    .el-input {
      width: 350px;
      height: 44px;

      .el-input__inner {
        background: #f4f5fb;
      }
    }

  }
}
</style>
<!--<style lang="scss">-->

<!--$bg:#283443;-->
<!--$light_gray:#fff;-->
<!--$cursor: #fff;-->

<!--@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {-->
<!--  .login-container .el-input input {-->
<!--    color: $cursor;-->
<!--  }-->
<!--}-->

<!--/* reset element-ui css */-->
<!--.login-container {-->
<!--  .el-input {-->
<!--    display: inline-block;-->
<!--    height: 47px;-->
<!--    width: 85%;-->

<!--    input {-->
<!--      background: transparent;-->
<!--      border: 0px;-->
<!--      -webkit-appearance: none;-->
<!--      border-radius: 0px;-->
<!--      padding: 12px 5px 12px 15px;-->
<!--      color: $light_gray;-->
<!--      height: 47px;-->
<!--      caret-color: $cursor;-->

<!--      &:-webkit-autofill {-->
<!--        box-shadow: 0 0 0px 1000px $bg inset !important;-->
<!--        -webkit-text-fill-color: $cursor !important;-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .el-form-item {-->
<!--    border: 1px solid rgba(255, 255, 255, 0.1);-->
<!--    background: rgba(0, 0, 0, 0.1);-->
<!--    border-radius: 5px;-->
<!--    color: #454545;-->
<!--  }-->
<!--}-->
<!--</style>-->

<!--<style lang="scss" scoped>-->
<!--$bg:#2d3a4b;-->
<!--$dark_gray:#889aa4;-->
<!--$light_gray:#eee;-->

<!--.login-container {-->
<!--  min-height: 100%;-->
<!--  width: 100%;-->
<!--  background-color: $bg;-->
<!--  overflow: hidden;-->

<!--  .login-form {-->
<!--    position: relative;-->
<!--    width: 520px;-->
<!--    max-width: 100%;-->
<!--    padding: 160px 35px 0;-->
<!--    margin: 0 auto;-->
<!--    overflow: hidden;-->
<!--  }-->

<!--  .tips {-->
<!--    font-size: 14px;-->
<!--    color: #fff;-->
<!--    margin-bottom: 10px;-->

<!--    span {-->
<!--      &:first-of-type {-->
<!--        margin-right: 16px;-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .svg-container {-->
<!--    padding: 6px 5px 6px 15px;-->
<!--    color: $dark_gray;-->
<!--    vertical-align: middle;-->
<!--    width: 30px;-->
<!--    display: inline-block;-->
<!--  }-->

<!--  .title-container {-->
<!--    position: relative;-->

<!--    .title {-->
<!--      font-size: 26px;-->
<!--      color: $light_gray;-->
<!--      margin: 0px auto 40px auto;-->
<!--      text-align: center;-->
<!--      font-weight: bold;-->
<!--    }-->

<!--    .set-language {-->
<!--      color: #fff;-->
<!--      position: absolute;-->
<!--      top: 3px;-->
<!--      font-size: 18px;-->
<!--      right: 0px;-->
<!--      cursor: pointer;-->
<!--    }-->
<!--  }-->

<!--  .show-pwd {-->
<!--    position: absolute;-->
<!--    right: 10px;-->
<!--    top: 7px;-->
<!--    font-size: 16px;-->
<!--    color: $dark_gray;-->
<!--    cursor: pointer;-->
<!--    user-select: none;-->
<!--  }-->

<!--  .thirdparty-button {-->
<!--    position: absolute;-->
<!--    right: 0;-->
<!--    bottom: 6px;-->
<!--  }-->

<!--  @media only screen and (max-width: 470px) {-->
<!--    .thirdparty-button {-->
<!--      display: none;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
